<template>
    <div id="users">
<!--        面包屑导航-->
        <bread-nav>
            <span slot="nav1">用户管理</span>
            <span slot="nav2">用户列表</span>
        </bread-nav>
        <el-card class="box-card">
            <div slot="header">
                    <el-input placeholder="请输入内容" v-model="queryInfo.query" @change="searchUser"
                    clearable>
                    <template slot="append">
                        <el-button slot="append" icon="el-icon-search" @click="searchUser"></el-button>
                    </template>
                </el-input>
                <el-button type="primary" class="add_user_btn" @click="addDialog">添加用户</el-button>
            </div>
<!--            用户列表-->
            <el-table
                    border
                    :data="userList"
                    stripe
                    style="width: 100%">
                <el-table-column  type="index" label="#"></el-table-column>
                <el-table-column
                        prop="username"
                        label="姓名"
                       >
                </el-table-column>
                <el-table-column
                        prop="mobile"
                        label="电话"
                       >
                </el-table-column>
                <el-table-column
                        prop="email"
                        label="邮箱">
                </el-table-column>
                <el-table-column
                        prop="role_name"
                        label="角色">
                </el-table-column>
                <el-table-column prop="mg_state" label="状态">
                    <template v-slot="scope">
                        <el-switch v-model="scope.row.mg_state" @change="editState(scope.row)"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200px">
                    <template v-slot="scope">
                        <el-tooltip  effect="dark" content="修改" placement="top" :enterable="false">
                        <el-button type="primary" icon="el-icon-edit" size="mini"
                                   @click="editDialog(scope.row.id)"></el-button>
                        </el-tooltip>
                        <el-tooltip  effect="dark" content="删除" placement="top" :enterable="false">
                        <el-button type="danger" icon="el-icon-delete" size="mini"
                                   @click="deleteUser(scope.row.id)"></el-button>
                        </el-tooltip>
                        <el-tooltip  effect="dark" content="分配角色" placement="top" :enterable="false">
                            <el-button type="warning" icon="el-icon-setting" size="mini"
                                       @click="setRoleDialog(scope.row)"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <!--        分页-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.pagenum"
                    :page-sizes="[1, 2, 5, 10]"
                    :page-size="queryInfo.pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-card>
<!--        添加用户对话框-->
        <add-user-dialog :message="addDialogVisible"/>
<!--        修改用户信息对话框-->
        <EditUserDialog :message="editDialogVisible" :editUserInfo="editUserInfo"/>
<!--        给用户添加角色-->
        <add-user-role-dia :message="addUserRoleVisible" :user="user" :roles-list="rolesList"/>
    </div>
</template>

<script>
    import BreadNav from "../../components/content/BreadNav";
    import AddUserDialog from "./userComp/AddUserDialog";
    import EditUserDialog from "./userComp/EditUserDialog";
    import AddUserRoleDia from "./userComp/AddUserRoleDia";
    //网络请求
    import {getUsers,editUserStatus,editUserData,deleteUser,getRoles} from "../../network/users";

    export default {
        name: "Users",
        components:{
            BreadNav,
            AddUserDialog,
            EditUserDialog,
            AddUserRoleDia
        },
        data(){
            return{
                queryInfo:{
                    query:'',//查询参数
                    pagenum:1,//当前页码
                    pagesize:2//每页显示条数
                },
                total:0,
                userList:[],
                user:{},
                rolesList:[],
                addDialogVisible:false,
                editDialogVisible:false,
                addUserRoleVisible:false,
                editUserInfo:{}
            }
        },
        mounted() {
            this.getUsersM();
        },
        methods:{
            //获取用户数据
            getUsersM(){
                getUsers(this.queryInfo).then(res => {
                    // console.log(res);
                    this.total = res.data.data.total;
                    this.userList = res.data.data.users;
                })
            },
            //修改当前每页显示条数
            handleSizeChange(val){
                this.queryInfo.pagesize = val;
                this.getUsersM()
            },
            //修改当前页
            handleCurrentChange(val){
                this.queryInfo.pagenum = val;
                this.getUsersM()
            },
            //修改当前用户状态
           editState(user){
                editUserStatus(user).then(res => {
                    if (res.data.meta.status !== 200){
                        user.mg_state = !user.mg_state;
                    }
                    this.$message.success(res.data.meta.msg);
                    console.log(res.data)

                })
           },
            //搜索用户
            searchUser(){
                this.getUsersM()
            },
            //监听添加用户对话框弹出事件
            addDialog(){
                this.addDialogVisible = !this.addDialogVisible
            },
            //监听修改用户对话框弹出事件
            editDialog(id){
                this.editDialogVisible = !this.editDialogVisible;
                if(id !== undefined){
                    // console.log(id);
                    editUserData(id).then(res => {
                        if (res.data.meta.status === 200){
                            this.editUserInfo = res.data.data;
                        }
                    })
                }
            },
            //监听删除用户事件
            deleteUser(id){
                this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(res => {
                    if(res === 'confirm'){
                        deleteUser(id).then(res => {
                            if( res.data.meta.status === 200){
                                this.$message.success(res.data.meta.msg);
                                this.getUsersM()
                        }else {
                                this.$message.error(res.data.meta.msg)
                            }
                        })
                    }
                }).catch(error => error)
            },
            //监听给用户添加角色事件
            setRoleDialog(user){
                this.addUserRoleVisible = !this.addUserRoleVisible;
                this.user = user;
                //获取角色列表
                getRoles().then(res => {
                    if(res.data.meta.status !== 200){
                        this.$message.warning('获取角色列表失败')
                    }
                    this.rolesList = res.data.data;
                })
            }
        },
        created() {
            this.$bus.$on('dialog',this.addDialog);
            this.$bus.$on('getUserB',this.getUsersM);
            this.$bus.$on('editDialog',this.editDialog);
            this.$bus.$on('addUserRole',this.setRoleDialog);
        }
    }
</script>

<style scoped lang="less">

    .el-input{
        width: 25rem;
    }
    .add_user_btn{
        font-size: 1.1rem;
        padding: 13px 2px;
        margin-left: 1rem;
    }

    @media only screen and (min-width: 1200px){
        .add_user_btn{
            font-size: 0.8rem;
            padding: 10px 5px;
            margin-left: 1rem;
        }

    }

</style>